// 支付宝 支付
<template>
  <div class="container" v-loading.fullscreen.lock="fullscreenLoading">
    <nav-login></nav-login>
    <div class="cartStep">
      <cart-logo></cart-logo>
      <cart-step :steps="steps"></cart-step>
    </div>
    <div class="w1200">
      <div class="title">
        <ul>
          <span class="el-icon-success"></span>
          <li>
            <h3>订单已提交成功，请您及时付款，我们将尽快为您安排发货！</h3>
          </li>
          <li>
            <!-- <i>
              请您在提交订单后
              <bdi>30分钟</bdi>内完成支付，否则订单自动取消...
            </i> -->
            <!-- <i>
              请您在提交订单后
              <bdi>10天</bdi>内完成支付，否则订单自动取消。
            </i>-->
          </li>
        </ul>
        <h3 class="price">
          应付金额
          <bdi>￥{{order.goods_price}}</bdi>
        </h3>
      </div>

      <div class="orderInformation">
        <h3>订单信息</h3>
        <ul>
          <li>创建时间：{{order.create_at}}</li>
          <li>订单编号：{{this.$store.state.order_no}}</li>
          <li>收货地址：{{ReceivingAddress}}</li>
          <li>运&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp费： {{order.freight_price}}</li>
          <!-- <li>发票地址：{{InvoiceAddress}}</li> -->
          <!-- <li>发票类型：{{}}</li> -->
          <!-- <li>发票抬头：吉林文德孚科技有限公司</li> -->
          <li>商品明细：</li>
          <li>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="goods_logo" label="商品图片" width="100">
                <template slot-scope="scope">
                  <img :src="scope.row.goods_logo" style="width:80px;height:80px">
                </template>
              </el-table-column>
              <el-table-column prop="goods_title" label="商品名称" width="300"></el-table-column>
              <el-table-column prop="goods_spec" label="商品描述">
                <template slot-scope="scope">
                  <p>{{scope.row.goods_spec}}</p>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="数量" width="100"></el-table-column>
            </el-table>
          </li>
        </ul>
      </div>
<!-- 支付方式修改 -->
      <div class="paymentMethod">
        <h3>支付方式</h3>
        <ul>
          <!-- <li>
            <el-radio v-model="radio" label="1">
              <span>
                <img class="tu1" src="@/assets/icon/Alipay.png" alt>
              </span>
            </el-radio>
          </li> -->

          <!-- <li>
            <el-radio v-model="radio" label="2">
              <span>
                <img class="tu2" src="@/assets/icon/WeChat.png" alt>
              </span>
            </el-radio>
          </li> -->
          <li>
            <el-radio v-model="radio" label="3">
              <span style="line-height: 50px; text-align: center; font-weight: 600">
                线下支付
                <!-- <img class="tu3" src="@/assets/icon/UnderTheLine.png" alt> -->
              </span>
            </el-radio>
          </li>

           <li>
            <el-radio v-model="radio" label="4">
              <span style="line-height: 50px; text-align: center; font-weight: 600">
                银联支付
              </span>
            </el-radio>
          </li>
        </ul>
      </div>
      <!-- 银行账户名 radio == '3'显示 否则隐藏-->
      <div class="BankAccount" v-show=" radio == '3' ">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="银行账户名：" prop="name" size="mini">
            <el-input v-model="ruleForm.name" style="width:52%" placeholder="请填写真实线下支付的银行帐户名"></el-input>
          </el-form-item>
        </el-form>
        <p>请填写真实转账的银行账户名称，如公司全称、个人姓名，该帐户名仅用孚地卖场核对您的支付钱款使用，请放心填写。</p>
      </div>

      <div class="ConfirmationOfPayment">
        <!-- <el-button @click="Alipay" type="warning" v-show="radio == '1'">确认支付</el-button> -->
        <el-button @click="WeChat" type="warning" v-show="radio == '2'">确认支付</el-button>
        <el-button
          @click="UnderTheLine"
          type="warning"
          v-show="radio == '3'"
          :disabled="disabled"
        >确认支付</el-button>

        <!-- 银联支付开始 -->
        <el-button
          @click="unionPay"
          type="primary"
          v-show="radio == '4'"
        >确认支付</el-button>
        <!-- 银联支付结束 -->
      </div>
      <div v-html="html">{{html}}</div>
      <!-- 线下支付 -->
      <el-dialog title :visible.sync="dialogFormVisible">
        <div>
          <div class="bordersi">
            <div class="bg">
              <h4>友情提示：</h4>
              <ul>
                <li>1.银行转账支付支持企业公对公转账和个人银行转账；</li>
                <li>2.请于打款成功后第一时间联系孚地卖场在线客服,告知汇款银行、金额、时间及用户名 信息，并保留汇款凭证，以便公司及时查账领款。</li>
              </ul>
            </div>

            <ol>
              <li>
                <img src="@/assets/bankLogo/blank2.png">
                <div>
                  <p>银行账号：22050137010000000733</p>
                  <p>开户名：长春文德孚智能科技有限公司</p>
                  <p>开户行：中国建设银行股份有限公司长春高新技术产业开发区支行</p>
                </div>
              </li>
            </ol>
          </div>
        </div>

        <div style="width:100%;height:1px;background:#f3f3f3;margin-top:20px;"></div>

        <div slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
          <el-button type="warning" @click="dialogForm">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 银联支付 -->
      <el-dialog
        title="请确认订单支付结果"
        :visible.sync="confirmPages"
        width="30%"
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="confirmPages = false">支付失败</el-button>
          <el-button type="primary" @click="confirmJump">支付成功</el-button>
        </span>
      </el-dialog>
    </div>
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>
<script>

import cartStep from "../shoppingCart/components/CartStep" // 步骤
import cartLogo from "../shoppingCart/components/Logo" // logo
export default {
  name: "payment",
  // 跳转回来的来源辨别 
  // beforeRouteEnter (to, from, next) {
  //   console.log('*****************',to,from,next);
  //   if(window.name == ""){
  //     console.log("首次被加载");
  //     window.name = "isReload";  // 在首次进入页面时我们可以给window.name设置一个固定值 
  //       if(from.fullPath == "/"){
  //       next(vm => {
  //         vm.confirmPages = true;
  //       })
  //     }else{
  //       next();
  //     }
  //   }else if(window.name == "isReload"){
  //     console.log("页面被刷新");
  //     next();
  //   }
  // },

  data() {
    return {
      confirmPages: false,
      fullscreenLoading: false,
      html: '',
      ReceivingAddress: '', // 收货地址
      InvoiceAddress: '', // 发票地址
      tableData: [],  // 商品详细信息展示
      order: {},   // 订单详细信息
      dialogFormVisible: false,
      steps: 3,  // 步骤的
      radio: "4",  // 支付方式的选择 
      ConfirmPayment: true, // 确认支付的按钮的点击默认值
      ruleForm: {
        name: ""
      },
      rules: {
        name: [
          { required: true, message: "账户名不能为空", trigger: "blur" }
        ]
      }
    }
  },
  computed: {
    disabled() {
      if (this.ruleForm.name) {
        return false
      } else {
        return true
      }
    }
  },
  watch: {
    ruleForm: {
      //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
      handler(curVal, oldVal) {
        console.log(curVal, oldVal)
        if (curVal.name.length >= 12) {
          this.ConfirmPayment = false
        } else {
          this.ConfirmPayment = true
        }
      },
      deep: true
    }
  },

  methods: {
    // 确认付款成功后的处理函数
    async confirmJump(){
      //验证是否成功 如果成功执行下面代码
      await this.$store.commit("leftIndex", 1);
      await this.$store.commit("OrderDetailsOrderNo", this.$store.state.order_no);
      await this.$router.replace({
        name: 'OrderDetails'
      });
    },
        /*
        *功能： 模拟form表单的提交
        *参数： URL 跳转地址 PARAMTERS 参数
        */
    Post(URL, PARAMTERS) {
      var temp_form = document.createElement("form");
      temp_form.action = URL;
      temp_form.target = "_self";
      temp_form.method = "post";
      temp_form.style.display = "none";
      //添加参数
      for (var item in PARAMTERS) {
          var opt = document.createElement("textarea");
          opt.name = item;
          opt.value = PARAMTERS[item];
          temp_form.appendChild(opt);
      }
      document.body.appendChild(temp_form);
      // 提交数据
      console.log(temp_form);
      temp_form.submit();
    },

    // 银联支付
    async unionPay(){
      let order_no = this.$store.state.order_no;
      this.$http({
        method:'post',
        url:'/api/index/chinapay/pay',
        data:{
          order_no
        }
      }).then(res=> {
        if(res.data.State.Code === '200'){
          if(res.data.pay_url){
            let pay_url = res.data.pay_url;
            let send_param = res.data.send_param;
            this.Post(pay_url,send_param)
          }else{
            this.$message.error(res.data.msg);
          }
        }
      }).catch(err=> {
        console.log(err);
      })
    },


    // 支付宝支付
    async Alipay() {
      this.fullscreenLoading = true
      let [WIDtotal_amount, WIDout_trade_no, WIDsubject, WIDbody] = [this.order.goods_price, this.order.order_no, '订单名称', '商品描述']
      let res = await this.$http({
        method: 'post',
        url: '/api/index/api/alipay_pc',
        data: {
          WIDtotal_amount,
          WIDout_trade_no,
          WIDsubject,
          WIDbody
        }
      })
      console.log(res.data)
      // 下面的四个步骤是关键 
      const div = document.createElement('div')
      div.innerHTML = res.data
      document.body.appendChild(div)
      document.forms.alipaysubmit.submit()
    },

    // 微信支付
    async WeChat() {
      console.log(this)
      this.fullscreenLoading = true
      let user_id = this.$store.state.UserInfor.user_id  // 用户号
      let out_trade_no = this.order.order_no   // 订单编号
      let total_amount = +this.order.goods_price // 金额
      let subject = '孚地卖场'  // 订单名称
      let remark = '孚地卖场' // 备注
      let param = [] // 商品id

      // 商品goods_list_id的获取 出现问题 需要修复的地方
      this.tableData.forEach((item, index) => {
        param.push({ 'product_id': item.goods_list_id })
      })

      let url = ''

      console.log(out_trade_no, total_amount, subject, remark, param, user_id)
      try {
        let res = await this.$http({
          method: 'post',
          url: '/api/index/web/wxpay',
          data: {
            out_trade_no,
            total_amount,
            subject,
            remark,
            param,
            user_id
          }
        })
        if (res.data.State.Code == 200) {
          this.$store.commit('qrcode', [`https://${res.data.data.qrcode}`, total_amount])
          this.$router.push({
            name: 'QrCode',
            params: {}
          })
        }
        this.fullscreenLoading = false
      } catch (error) {
        this.fullscreenLoading = false
        console.log('微信支付接口出现问题')
      }

    },

    // 订单初始化
    async InitOrderInfor() {
      this.fullscreenLoading = true
      let order_no = this.$store.state.order_no
      let res = await this.$http({
        method: 'post',
        url: '/api/index/api/getOrder',
        data: {
          order_no
        }
      })
      let data = res.data
      if (data.State.Code == 200) {
        console.log(data.data)
        this.ReceivingAddress = `
          ${data.data.receipt_address.province_name}
          ${data.data.receipt_address.city_name}
          ${data.data.receipt_address.district_name}
          ${data.data.receipt_address.address}
          ${data.data.receipt_address.consignee}
          ${data.data.receipt_address.phone}
        `
        // this.InvoiceAddress = `
        //   ${data.data.invoice_address.province_name}
        //   ${data.data.invoice_address.city_name}
        //   ${data.data.invoice_address.district_name}
        //   ${data.data.invoice_address.address}
        //   ${data.data.invoice_address.consignee}
        //   ${data.data.invoice_address.phone}
        // `

        this.tableData = data.data.order_goods
        this.order = data.data.order
        this.fullscreenLoading = false
        console.log('888888888888',this.tableData)
      }
    },
    UnderTheLine() {
      this.dialogFormVisible = true
    },
    // 线下支付的确定键（温馨提示后面的确定 而不是选择中的提示
    async dialogForm() {
      this.dialogFormVisible = false
      let order_no = this.$store.state.order_no,
        bank_card = this.ruleForm.name,
        res = await this.$http({
          method: 'post',
          url: '/api/index/api/offline_pc',
          data: {
            order_no,
            bank_card
          }
        })
      if (res.data.State.Code == 200) {
        this.$router.push("/paymentSuccess")
      }
    },

    ConfirmationOfPayment() {
      console.log("点击了确认支付按钮")
    }
  },

  components: {
    cartStep,
    cartLogo
  },
  mounted() {
    this.InitOrderInfor()
  }
}
</script>
<style lang="scss" scoped>
.container {
  .cartStep {
    width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .w1200 {
    width: 1198px;
    margin: auto;
    border-top: 2px solid #4ba0ff;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 88px;
    .el-button {
      margin: auto;
    }
    .title {
      width: 1160px;
      padding: 20px;
      height: 60px;
      background: #f8f8f8;
      border-bottom: 1px solid #e2e2e2;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      ul {
        position: relative;
        li {
          padding-left: 25px;
          i {
            padding-right: 30px;
          }
          bdi {
            color: #ff0000;
          }
        }
        span {
          position: absolute;
          top: 0px;
          left: 0px;
          color: #ff9900;
          line-height: 24px;
          padding-right: 10px;
        }
      }
      .price {
        text-align: right;
        bdi {
          color: #ff0000;
          font-weight: normal;
          font-size: 20px;
        }
      }
    }
    .orderInformation {
      width: 1134px;
      padding-left: 46px;
      border-bottom: #e2e2e2 1px solid;
      h3 {
        line-height: 60px;
      }
      ul {
        li {
          line-height: 27px;
          font-size: 12px;
          color: #383838;
          &:last-child {
            padding-bottom: 15px;
          }
        }
      }
    }
    .paymentMethod {
      width: 1134px;
      padding-left: 46px;

      h3 {
        line-height: 60px;
      }
      ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 12px;
        li {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-right: 30px;
          .el-radio {
            display: flex;
            flex-direction: row;
            align-items: center;
            span {
              width: 162px;
              height: 48px;
              display: inline-block;
              border: 1px solid #e4e3e3;
              border-radius: 5px;
              margin-left: 5px;
              .tu1 {
                margin-top: 7px;
                margin-left: 37px;
              }
              .tu2 {
                margin-top: 7px;
                margin-left: 37px;
              }
              .tu3 {
                margin-top: 17px;
                margin-left: 51px;
              }
            }
          }
        }
      }
    }
    .BankAccount {
      width: 1160px;
      height: 75px;
      background: #f4f4f4;
      padding-left: 40px;
      padding-top: 25px;
      padding-bottom: 20px;
      p {
        font-size: 12px;
        color: #7a7a7a;
        text-indent: 31px;
        line-height: 30px;
      }
    }
    .ConfirmationOfPayment {
      width: 100%;
      .el-button {
        margin-top: 20px;
        margin-left: 550px;
        margin-bottom: 30px;
        letter-spacing: 1px;
      }
    }
    .el-dialog {
      .bordersi {
        width: 99%;
        margin: auto;
        border: 2px solid #e6a23c;
        margin-bottom: 10px;
        .bg {
          margin: 5px;
          padding: 15px 9px;
          background: #eaeaea;
          h4 {
            color: #ff0000;
          }
        }
        ol {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          margin-bottom: 20px;
          font-size: 12px;
          margin-top: 12px;
          li {
            img {
              width: 96px;
              margin: 10px 10px;
            }
            div {
              p {
                text-indent: 1em;
              }
            }
          }
        }
      }
    }
  }
}
</style>
